<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org" xmlns:layout="http://www.thymeleaf.org">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
        <title>$Title$</title>

        <link href="webjars/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet"/>

        <link rel="stylesheet" href="/css/hzy-v1.css"/>

        <script src="webjars/jquery/1.11.1/jquery.min.js"></script>

        <script src="webjars/angularjs/1.7.8/angular.min.js"></script>

        <script src="/js/hzy-navigator.js"></script>

        <script src="/js/hzy-dictionary.js"></script>
        
        <script type="text/javascript">

            $(document).ready(function () {
                recalculateHeight();
                $(window).resize(function () {
                    recalculateHeight();
                })

//                doubleClickClose();
            });

            function recalculateHeight() {
                var headerH = $("#app-header").height();
                var footH = $("#app-footer").height();
                var appH = $("#app-container").height();
                $("#main-sidebar,#main-content").css("height",(appH - headerH - footH)+"px");
            }


            function doubleClickClose(target) {
                var selector = "input[type='hidden']";
                var navId = $(target).children(selector)[0].value;
                var siblings = $(target).siblings();
                $(target).remove();
                dict.remove(navId);
                var contentContainer = $("#main-content div.concrete-content-container");
                contentContainer.html("");
                if(siblings.length <= 0){
                    return;
                }
                var latest = siblings[siblings.length - 1];
                navId = $(latest).children(selector)[0].value;
                var saveHtml = dict.get(navId);
                console.log(saveHtml);
                contentContainer.html(saveHtml);
                $(latest).addClass("active");
            }

            function loadHtml(url) {
                var contentContainer = $("#main-content div.concrete-content-container");
                contentContainer.load(url,function (response, status, xhr) {
                    if ( status == "success" ) {

                        contentContainer.html(response);
                    }
                });
            }
        </script>
    </head>
    <body class="ui-v1">
        <div id="app-container">
            <div th:include="components/header :: header" id="app-header">
                HEADER
            </div>

            <div id="app-content">

                <!--sidebar-->
                <div th:include="components/sidebar :: sidebar" id="main-sidebar"></div>

                <div id="main-content">
                    <div id="nav-history-row">
                        <ul class="nav nav-tabs">
                            <!--<li role="presentation" class="active">-->
                                <!--<a href="#">Menu</a>-->
                            <!--</li>-->
                            <!--<li role="presentation">-->
                                <!--<a href="#">Category</a>-->
                            <!--</li>-->
                            <!--<li role="presentation"><a href="#">Category</a> </li>-->
                            <!--<li role="presentation"><a href="#">Nav2</a> </li>-->
                        </ul>

                    </div>
                    <div layout:fragment="content">

                    </div>

                </div>
            </div>

            <div th:include="components/footer :: footer" id="app-footer">
                FOOTER
            </div>



        </div>
        <script type="text/javascript">
            var headerHeight = 60;
            $(document).ready(function () {
                var footerHeight = $("#main-footer").height();
                var bodyHeight = $(window).height();
                var mainContentHeight = bodyHeight - headerHeight - footerHeight;
                $("#app-container").height(mainContentHeight+"px");

                var navigator = getNavigator("/api/menu/list");
                console.log(JSON.stringify(navigator));
            });
        </script>

    </body>


</html>